<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" @click="opAdd">新增公告</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>               
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="公告标题" label-width="80px">
                        <el-input
                            placeholder="---请输入公告标题---"
                            v-model="queryList.bulletinTitle"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="公告内容" label-width="80px">
                        <el-input
                            placeholder="---请输入公告内容---"
                            v-model="queryList.bulletinBody"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="通知终端" label-width="80px">
                        <el-select
                            placeholder="---请选择通知终端---"
                            v-model="queryList.endPoint"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option label="PC端" value="1"/>
                            <el-option label="小程序端" value="2"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构类型" label-width="80px">
                        <el-select
                            placeholder="---请选择机构类型---"
                            v-model="queryList.orgType"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option label="集采中心" value="1"/>
                            <el-option label="门店" value="2"/>
                            <el-option label="供应商" value="3"/>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="状态" label-width="80px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.status"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布人" label-width="80px">
                        <el-input
                            placeholder="---请输入发布人---"
                            v-model="queryList.createName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="发布时间" label-width="80px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.crDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
                <scTable
                    ref="mytable"
                    :queryType="'bulletin/pages'"
                    :data="listData"
                    :queryList="queryList"
                    :column="columnList"
                    :orderList="OrderList"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    :row-key="tableKey"
                    :key="tableKey"
                    stripe
                    border
                >
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="序号" type="index" width="60" />
                    <el-table-column prop="createTime" label="发布时间" width="180" ></el-table-column>
                    <el-table-column prop="BulletinType" label="公告类型" width="120" show-overflow-tooltip>
                        <template #default="scope">
                            {{scope.row.bulletinTypeDesc}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="bulletinTitle" label="公告标题" width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="bulletinBody" label="公告内容"  width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="endPoint" label="通知终端" width="180" >
                        <template #default="scope">
                            <div v-if="scope.row.endPoint!=3">
                                <el-tag type="primary" effect="plain" v-if="scope.row.endPoint==1"><el-icon><Monitor /></el-icon>PC</el-tag>
                                <el-tag type="danger" effect="plain" v-if="scope.row.endPoint==2"> <el-icon><Iphone /></el-icon>小程序</el-tag>
                            </div>
                            <div v-else-if="scope.row.endPoint==3">
                                <el-tag type="primary" effect="plain"><el-icon><Monitor /></el-icon>PC</el-tag>
                                <el-tag type="danger" effect="plain"><el-icon><Iphone /></el-icon>小程序</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orgType" label="面向机构" width="100" >
                        <template #default="scope">
                            <el-tag type="primary" effect="dark" v-if="scope.row.orgType==1">集采中心</el-tag>
                            <el-tag type="success" effect="dark" v-if="scope.row.orgType==2">门店</el-tag>
                            <el-tag type="warning" effect="dark" v-if="scope.row.orgType==3">供应商</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orgNames" label="面向机构名称"  width="200" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="beginTime" label="公告开始时间" width="180" ></el-table-column>
                    <el-table-column prop="endTime" label="公告结束时间" width="180" >
                        <template #default="scope">
                            <span v-if="scope.row.isExpire" style="color:red">{{scope.row.endTime}}</span>
                            <span v-else>{{scope.row.endTime}}</span>
                        </template>
                    </el-table-column>
                   
                    <el-table-column prop="bulletInSendType" label="发送类型" width="100" >
                        <template #default="scope">
                            <el-tag type="primary" effect="dark" v-if="scope.row.bulletInSendType==0">所有人</el-tag>
                            <el-tag type="success" effect="dark" v-if="scope.row.bulletInSendType==1">指定用户</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column  label="用户列表" width="100" type="expand">
                        <template #default="props">
                            <el-table :data="props.row.userItems" border size="small"  style="width: 600px;margin-top: 5px;margin-bottom: 5px; margin-left: 1350px;">
                                <el-table-column label="用户ID" prop="accountId" />
                                <el-table-column label="用户名称" prop="realName" />
                                <el-table-column label="手机号" prop="mobile" />
                                <el-table-column label="机构类型" prop="accountTypeDesc" />
                                <el-table-column label="机构名称" prop="orgName" />
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createName" label="发布人" width="100" ></el-table-column>
                   
                    <el-table-column label="操作"  align="center" width="200" >
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            ><el-icon><View /></el-icon> 查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opResult(scope.row, scope.$index)"
                            ><el-icon><View /></el-icon> 公告效果</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opEdit(scope.row, scope.$index)"
                            ><el-icon><Edit /></el-icon>编辑</el-button>
                            <el-popconfirm
                                title="确定删除吗？"
                                @confirm="opDelete(scope.row, scope.$index)"
                            >
                                <template #reference>
                                    <el-button
                                        text
                                        type="danger"
                                        size="small"
                                    ><el-icon><Delete /></el-icon>删除公告</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                        
                        </template>
                    </el-table-column> 
                </scTable>
            
        </el-main>
    </el-container>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>

    <result-dialog
        v-if="dialogResult"
        ref="resultDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogResult = false"
    ></result-dialog>
    
</template>

<script>

import saveDialog from "./save";
import resultDialog from "./result";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
export default {
    name: "bulletinList",
    components: {
        saveDialog,
        resultDialog,
        publicjs
    },
    data() {
        return {
            dialogSave: false,
            dialogResult: false,
            showCondition: false,
            selectionRows: [],
            pkList: [""],
            columnList: [
                  
            ],
            OrderList: { },
            queryList: {
              
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            optionsStatus:[],//消息状态
            optionsBulletinType:[],
            orgType: 1,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add");
            });
        },
         //查看
         opShow(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row);
                this.$refs.saveDialog.open("Show");
            });
        },
        //查看效果
        opResult(row)
        {
            this.dialogResult = true;
            this.$nextTick(() => {
                this.$refs.resultDialog.setData(row);
                this.$refs.resultDialog.open("Show");
            });
        },
        //编辑
        opEdit(row)
        {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row);
                this.$refs.saveDialog.open("Edit");
            });
        },
         //删除
         async opDelete(row) {
            
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "bulletin/delete",
                    { bulletinId: row.bulletinId }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
         //表格选择后回调事件
         selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status","BulletinType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsStatus = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                    this.optionsBulletinType = returnValue.response.find(
                        (p) => p.code == "BulletinType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        setRowClass({ row }) {
            if (row.isExpire) {
                return "expire-color";
            }
            return "";
        }
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
       
        await this.initOptions();
        await this.opBindData();

        
        
    },
};
</script>

